<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layui-container">

    <div class="layui-row">
        <div class="layui-col-md4">
            <button class="layui-btn layui-btn-normal" id="addfbtn">添加设备分类</button>
            <div id="equiptree"></div>
        </div>
        <div class="layui-col-md8">
            <table id="equiptable" lay-filter="equiptablefilter"></table>
            <div id="pagelimit"></div>

        </div>
    </div>
</div>

<!--弹出框的html片段  ，直接在body-->
<div id="addhtml" style="display: none">

    <form class="layui-form" action="javascript:;">
        <input type="hidden" name="catePid">
        <div class="layui-form-item">
            <label class="layui-form-label">添加子节点：</label>
            <div class="layui-input-block">
                <input type="text" name="cateName" required  lay-verify="required" placeholder="请输入节点名" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addNodeform">确定</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>


<script id="toolbarbtn" type="text/html">
    <button class="layui-btn layui-btn-normal" lay-event="add">添加</button>
    <button class="layui-btn layui-btn-danger" lay-event="dels">批量删除</button>
</script>


<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script src="../common/common.js"></script>
<script>


    $("#addfbtn").click(function (){ // 点击后

        $("input[name=\"catePid\"]").val(0);

        layui.use('layer',function (){
            var layer = layui.layer;

            openlayer("添加节点","#addhtml");

        })


    })


// 文档加载完成后
    $(function (){
        // 渲染树
        ajaxtree();

        // 渲染表
        ajaxtable();
    })


    function ajaxtable(){
        layui.use(['table','tree'],function (){
            var table = layui.table;
            var tree = layui.tree;

// 分页参数 1， 页码 2，每页展示条数
            table.render({
                elem: '#equiptable'
                ,url: '/equip/getPage' //数据接口
                ,height: 500
                ,page: {
                    layout:['count','prev','page','next','limit'],
                    groups:5
                    ,limit:10
                    ,limits:[10,20,30]

                }
                ,cols: [
                    [ //表头
                    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                    ,{field: 'name', title: '设备名称', width:80}
                    ,{field: 'equstatus', title: '设备状态', width:80, sort: true}
                    ,{field: 'equno', title: '设备编号', width:80}
                    ,{field: 'categoryId', title: '设备分类', width: 177}
                    ,{field: 'fixassetno', title: '资产编号', width: 80, sort: true}
                    ,{field: 'factory', title: '原厂编号', width: 80, sort: true}
                    ,{field: 'specification', title: '设备规格', width: 80}
                    ,{field: 'serialno', title: '设备型号', width: 80}
                    ,{field: 'storagedate', title: '入库日期', width: 80}
                    ,{field: 'manufacturedate', title: '出厂日期', width: 80}
                    ,{field: 'purchasedate', title: '购置日期', width: 80}
                    ,{field: 'price', title: '价格', width: 80}
                    ,{field: 'handler', title: '经手人Id', width: 80}
                    ,{field: 'depreciation', title: '折旧方式', width: 80}
                    ,{field: 'createUser', title: '创建人Id', width: 80}
                    ,{field: 'model', title: '设备状态', width: 80}
                    ,{field: 'storelocation', title: '岗位/位置', width: 80}
                    ,{field: 'group_id', title: '所属部门', width: 80}
                    ,{field: 'oriFacNo', title: '原厂编号', width: 80}
                    ,{field: 'eqmUseStatus', title: '使用状态', width: 80}
                    ,{field: 'useLife', title: '使用年限', width: 80}
                    ,{field: 'eqmStartUseDate', title: '启动日期', width: 80}

                ]
                ],
                parseData:function(res){ //res 即为原始返回的数据
                    return {
                        "code": res.state, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.equips //解析数据列表
                    };
                },
                toolbar:'#toolbarbtn'
            });

            // 头工具栏监听事件
            table.on('toolbar(equiptablefilter)',function (obj){

                var type = obj.event;
                if(type == 'add'){


                    // 选择设备的分类后再弹出子页面，并将数据带到子页面
                    var checkData = tree.getChecked('equiptreeID');

                    console.log(checkData.length);

                    if(checkData.length == 0){
                        layer.msg('请选择设备的分类');
                    }else if(checkData.length > 1){
                        layer.msg('不能选择多个分类');
                    }else {

                        console.log(checkData[0].children);
                       var chi =  checkData[0].children;
                        if(chi.length > 1){
                            layer.msg('不能选择多个分类');

                        }else if(chi.length == 1){
                            layer.open({
                                type:2,
                                title:'添加',
                                content:"equips/equipadd.html",
                                area:['80%','80%'],
                                success:function (layero,index){
                                    console.log(chi[0].id);
                                    // 成功打开iframe后的回调函数
                                    var body = layer.getChildFrame('body', index);
                                    body.find("input[name='categoryId']").val(chi[0].id);

                                }


                            })
                        }

                    }



                }else if(type == 'dels'){
                    layer.msg("批量删除")
                }

            })


        })

    }



    function ajaxtree(){

    // ajax 请求数据
        $.ajax({
            type:'get',
            url:'/cate/tree',
            data:{},
            dataType:'json',
            success:function (res){
                treerender(res);
            }
        })

    }



    function treerender(data){

        layui.use(['tree','table','layer','form'],function (){
            var tree = layui.tree,
                layer = layui.layer,
                form = layui.form,
                table = layui.table;

             tree.render({
                elem:'#equiptree',
                data:data,
                id:'equiptreeID',
                edit:true, // 修改删除
                showCheckbox:true,
                click: function(obj) {
                    console.log(obj.data); //得到当前点击的节点数据 id title ,children
                    // 将节点的id 存入 表单
                    $("input[name='catePid']").val(obj.data.id);

                    openlayer("添加节点","#addhtml");


                },
                operate: function(obj) {
                    var type = obj.type; //得到操作类型：update、del
                    var data = obj.data; //得到当前节点的数据

                    console.log(data);
                    // debugger
                    if(type == 'update'){
                        // debugger
                         // 修该
                        // ajax请求
                        $.ajax({
                            type:'post',
                            url:'/cate/edit',
                            data:data,
                            dataType:'json',
                            success:function (res){

                               layer.msg(res.msg,{time:500,icon:6})
                                // 刷新树
                                tree.reload('equiptreeID');
                            }
                        })


                    }else if(type == 'del'){
                        // debugger
                        // ajax删除 --- 修改isdel = 1
                        $.ajax({
                            type:'post',
                            url:'/cate/del',
                            data:data,
                            dataType:'json',
                            success:function (res){

                                layer.msg(res.msg,{time:500,icon:6})
                                // 刷新树
                                ajaxtree();
                            }
                        })

                        // 刷新树
                    }
                }

            }),

            //监听提交按钮
            form.on('submit(addNodeform)',function (data){
                data = data.field;

                console.log(data);
                //ajax添加

                $.ajax({
                    type:'post',
                    url:'/cate/add',
                    data:data,
                    dataType:'json',
                    success:function (res){

                        layer.msg(res.msg,{time:500,icon:6})
                        // 关闭所有弹框
                        layer.closeAll();
                        // 刷新树
                        ajaxtree();
                    }
                })

                return false;

            })

        })

    }

</script>

</body>
</html>